<cp-navbar (onClickLeft)="onClickLeft()"></cp-navbar>
<div class="loading" *ngIf="loading"><cp-loading></cp-loading></div>
<div class="container" *ngIf="!loading">
  <!-- <div class="tabbar"><cp-tab [items]="items" [itemWidth]="48" [gapWidth]="16"></cp-tab></div> -->
  <div class="slider">
    <Carousel [dots]="false" [infinite]="false" (afterChange)="afterChange($event)">
      <CarouselSlide *ngFor="let item of detail.Photos">
        <div class="item"><img [src]="item.src" /></div>
      </CarouselSlide>
    </Carousel>
    <div class="price-index">
      <div class="price">
        <p class="label" *ngIf="detail.Price != '售价待定'">参考均价</p>
        <p class="value">
          <span class="num" style="font-weight: 200; ">{{ detail.Price }}</span
          ><span class="unit"> {{ detail.Unit }} </span>
        </p>
      </div>
      <div class="index">
        <p class="label">{{ detail.Photos[currentIndex]['Category'] }}</p>
        <p class="current">{{ currentIndex + 1 }}/{{ detail.Photos.length }}</p>
      </div>
    </div>
  </div>
  <div class="block baseinfo" style="margin-bottom:0">
    <div class="namebox">
      <p class="name">{{ detail.Name }}</p>
      <div class="Alias" *ngIf="detail.Alias">别名：{{ detail.Alias }}</div>
      <div class="tags">
        <!-- <div class="tag tag-status" *ngIf="detail.Status">{{ detail.Status | estateSellStatus }}</div> -->
        <!-- <div class="tag tag-type" *ngIf="detail.Property">{{ detail.Property }}</div> -->
      </div>
    </div>
    <div class="advantage tags">
      <div class="tag tag-border" *ngFor="let t of detail.Tag">{{ t }}</div>
    </div>
    <div class="common-label-value">
      <div class="list">
        <div class="item">
          <p class="label2">装修：</p>
          <p class="value">{{ detail.Decoration }}</p>
        </div>
        <div class="item">
          <p class="label2">朝向：</p>
          <p class="value">
            <span *ngFor="let item of detail.Orientation">{{ item }}、</span>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="houseLink" [queryParams]="{ project: detail.ProjectReference.Id }" routerLink="/workspace/estate/detail">
    <p class="label2">楼盘：</p>
    <p class="value">{{ detail.ProjectReference.Name }}</p>

    <i class="icon icon-right" style="color:#ddd"></i>
  </div>

  <div class="block comment" *ngIf="detail.CommentSummary">
    <div class="pubtitle">
      <div class="left">户型点评({{ detail.CommentSummary.LayoutCount }})</div>
      <!-- <div class="right" routerLink="/workspace/estate/comment">
                <span class="value">查看全部</span> <i class="icon icon-right"></i>
            </div> -->
    </div>
    <div class="content"><cp-estate-comment [item]="detail.CommentSummary"></cp-estate-comment></div>
    <div class="oprbar">
      <!-- <button class="btn btn-block">
                <img src="assets/images/HouseDetails/icon_comment.png" /> <span>我要点评</span>
            </button> -->
    </div>
  </div>

  <div class="block question">
    <div class="pubtitle">
      <div class="left">问问大家({{ (detail.QuestionSummary && detail.QuestionSummary.Count) || 0 }})</div>
      <div
        class="right"
        [queryParams]="{ project: detail.ProjectReference.Id, name: detail.ProjectReference.Name }"
        routerLink="/workspace/estate/question"
      >
        <span class="value">查看全部</span> <i class="icon icon-right"></i>
      </div>
    </div>
    <div class="content"><cp-estate-question [item]="detail.QuestionSummary"></cp-estate-question></div>
    <div class="oprbar">
      <!-- <button class="btn btn-block">
                <img src="assets/images/HouseDetails/icon_question.png" /> <span>我要提问</span>
            </button> -->
    </div>
  </div>

  <div class="block estates" *ngIf="detail.ProjectSummarys.length > 0">
    <div class="pubtitle"><div class="left">同户型房源</div></div>
    <div class="content">
      <div
        class="item"
        *ngFor="let item of detail.ProjectSummarys"
        [queryParams]="{ project: item.Id }"
        routerLink="/workspace/estate/detail"
      >
        <cp-estate-item [activity]="false" [item]="item"></cp-estate-item>
      </div>
    </div>
  </div>
  <cp-oprbar
    type="layout"
    [id]="detail.Id"
    [estateStatus]="detail.ProjectReference.Status"
    [phone]="detail.ProjectReference.Phone"
    [projectDispatch]="detail.ProjectDispatch"
    [(favorite)]="detail.Favorite"
  ></cp-oprbar>
</div>
